/*
 * @Author: yuanxiang 
 * @Date: 2018-05-15 11:37:27 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-06-26 09:16:40
 */

<template>
  <div class="finanContent finanProfitMain">
      <el-row type="flex" class="dataBtn marginBot-20">
          <div class="dateMonth">
            <el-date-picker :editable="false" :clearable="false"  @change="dateChange(0)" v-model="startMonth" type="month" placeholder="选择月" class='week-con'></el-date-picker>
            <span style="padding:0 10px">至</span>
            <el-date-picker :editable="false" :clearable="false" @change="dateChange(1)" v-model="endMonth" type="month" placeholder="选择月" class='week-con'></el-date-picker>
          </div>
          <div class="radioBtn">
              <div class="radioBtnBlue">
                <el-radio-group  @change="fetchData" v-model="defaultBtn">
                    <el-radio-button label="3008">本月</el-radio-button>
                    <el-radio-button label="3009">本季度</el-radio-button>
                    <el-radio-button label="3010">本年度</el-radio-button>
                </el-radio-group>
            </div>
          </div>
      </el-row>
      <!-- 营业收入 营业收入增长对比趋势 -->
      <el-row type="flex" class="marginBot-20 sameBack finan_interests">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <chart-lay-out>
              <span slot="title">营业收入(万元)</span>
              <div slot="identi" class="identiNumber">
                <p>
                  <span>总收入:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.generalIncome" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                </p>
                <p>
                  <span>达成率:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.achievingRate" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                  <span style="margin-left:3px;">%</span>
                </p>
              </div>
              <bar-charts slot="main" v-model="generalIncomeArr" :option="myOption"></bar-charts>
            </chart-lay-out>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <chart-lay-out :showLine="false">
                <span slot="title">营业收入增长对比趋势(万元)</span>
                <bar-line-charts style="margin-top:36px" slot="main" v-model="mainBusinessIncomeArr" :option="tradeTrendOption"></bar-line-charts>
            </chart-lay-out>
          </el-col>
      </el-row>
      <!-- 净利润 净利润增长对比趋势 -->
      <el-row type="flex" class="marginBot-20 sameBack finan_interests">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <chart-lay-out>
              <span slot="title">净利润(万元)</span>
              <div slot="identi" class="identiNumber">
                <p>
                  <span>净利润合计:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.totalNetProfit" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                </p>
                <p>
                  <span>总预算:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.netProfitBudget" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                </p>
              </div>
              <bar-charts slot="main" v-model="grossProfitArr" :option="myOption"></bar-charts>
            </chart-lay-out>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <chart-lay-out :showLine="false">
                <span slot="title">净利润增长对比趋势(万元)</span>
                <bar-line-charts style="margin-top:36px" slot="main" v-model="netMarginArr" :option="tradeTrendOption"></bar-line-charts>
            </chart-lay-out>
          </el-col>
      </el-row>
      <!-- 营业毛利(万元) 人均劳效-按收入(万元) 净利润(万元) -->
      <el-row type="flex" class="marginBot-20 wrap-left">
          <div class="sameBack finan_interests">
              <!-- 营业毛利(万元) -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out>
                  <span slot="title">营业毛利(万元)</span>
                  <div slot="identi" class="identiNumber">
                <p>
                  <span>营业毛利合计:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.totalGrossProfit" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                </p>
                <p>
                  <span>总预算:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.grossProfitBudget" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                </p>
              </div>
                  <bar-chart slot="main"  v-model="businesProfitRatioPieArr"></bar-chart>
                </chart-lay-out>
              </el-col>
              <!-- 人均劳效-按收入(万元) -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out>
                  <span slot="title">人均劳效-按收入(万元)</span>
                  <bar-chart style="margin-top:36px" slot="main"  v-model="operatingExpensesAndProfitsArr"></bar-chart>
                </chart-lay-out>
              </el-col>
              <!-- 净利润(万元) -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out :showLine="false">
                  <span slot="title">净利率</span>
                  <bar-chart style="margin-top:36px" slot="main"  v-model="otherProfitArr"></bar-chart>
                </chart-lay-out>
              </el-col>
          </div>
      </el-row>
      <!-- 营业成本合计(万元) 期间费用(万元) 期间费用预算支出(万元) -->
      <el-row type="flex" class="marginBot-40 wrap-left">
          <div class="sameBack finan_interests">
              <!-- 营业成本合计(万元) -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out>
                  <span slot="title">营业成本(万元)</span>
                  <div slot="identi" class="identiNumber">
                <p>
                  <span>营业成本合计:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.theCostOfACombined" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                </p>
                <p>
                  <span>总预算:</span>
                  <span class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="singleTargetListWithSumData.costBudgeting" :decimals="decimals" :duration="duration" :options="options" />
                  </span>
                </p>
              </div>
                  <bar-charts slot="main"  v-model="nonbusinessIncomeArr" :option="myOption"></bar-charts>
                </chart-lay-out>
              </el-col>
              <!-- 期间费用(万元) -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out>
                  <span slot="title">期间费用(万元)</span>
                  <pie-chart style="margin-top:60px" slot="main"  v-model="businesProfitRatioBarArr"></pie-chart>
                </chart-lay-out>
              </el-col>
              <!-- 期间费用预算支出(万元) -->
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <chart-lay-out :showLine="false">
                  <span slot="title">期间费用预算支出(万元)</span>
                  <bar-charts style="margin-top:36px" slot="main"  v-model="undistributedProfitShareArr" :option="myOption"></bar-charts>
                </chart-lay-out>
              </el-col>
          </div>
      </el-row>
  </div>
</template>
<script>
import chart from "@/components/Charts/newChart";
import barChart from "@/components/Charts/barChart";
import pieChart from "@/components/Charts/pieChart";
import barCharts from "@/components/Charts/barCharts";
import chartLayOut from "@/components/Charts/chartLayOut";
import ICountUp from "vue-countup-v2";
import barLineCharts from "@/components/Charts/barLineCharts";
import {
  GetFinanceProfitDistributionChartApi,
  GetFinanceProfitDistributionForTrendChart,
  GetFinanceProfitDistributionChartApiForTwo
} from "@/api/finance/index";

export default {
  data() {
    return {
      tradeTrendOption: {
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        }
      },
      myOption: {
        labelDefault: 0,
        grid: {
          left: "20%"
        }
      },
      startTime: "",
      endTime: "",
      startMonth: new Date(),
      endMonth: new Date(),
      defaultBtn: "3008",
      month: new Date(),
      generalIncomeArr: [], // 总收入
      grossProfitArr: [], // 净利润
      netMarginArr: [], // 净利润
      incomeFromMainOperationArr: [], // 各板块主营业务利润(万元)
      mainBusinessIncomeArr: [], // 各板块主营业务收入净额(万元)
      periodExpenseArr: [], // 期间费用(万元)
      businesProfitRatioPieArr: [], // 营业毛利
      businesProfitRatioBarArr: [], // 期间费用
      undistributedProfitShareArr: [], // 期间费用预算支出
      nonbusinessIncomeArr: [], // 营业成本
      operatingExpensesAndProfitsArr: [], // 人均劳效
      otherProfitArr: [], // 净利率
      singleTargetListWithSumData: {
        generalIncome: 0, // 总收入
        achievingRate: 0, // 达成率
        totalNetProfit: 0, // 净利润合计
        netProfitBudget: 0, // 净利润总预算
        totalGrossProfit: 0, // 毛利合计
        grossProfitBudget: 0, // 毛利总预算
        theCostOfACombined: 0, // 成本合计
        costBudgeting: 0 // 总收入
      },
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  mounted() {
    $(".bg4Con").scrollTop(0);
    var year = new Date(this.month).getFullYear();
    var month = new Date(this.month).getMonth() + 1;
    var allDays = new Date(year, month, 0).getDate();
    this.startTime = year + "-" + month + "-" + "1";
    this.endTime = year + "-" + month + "-" + allDays;
    this.fetchData();
    this.fetchMainBusinessIncomeArr();
  },
  components: {
    chart,
    ICountUp,
    barChart,
    barCharts,
    chartLayOut,
    barLineCharts,
    pieChart
  },
  methods: {
    dateChange(res) {
      this.defaultBtn = ""
      if (res === 0) {
        // 第一个
        // 检查是否小于结束时间
        if (this.startMonth < this.endMonth) {
          this.startTime = this.$utils.parseTime(
            this.startMonth,
            "{y}-{m}-{d}"
          );
          this.fetchData();
        } else if (this.endMonth && this.startMonth >= this.endMonth) {
          this.$set(this, "endMonth", null);
          this.$set(this, "startTime", this.$utils.parseTime(this.startMonth, "{y}-{m}-{d}"));
          this.$message({
            message: "起始时间不能大于结束时间",
            type: "warning"
          });
          return;
        }
      } else {
        // 检查是否小于起始时间
        if (this.startMonth > this.endMonth) {
          this.$message({
            message: "起始时间不能大于结束时间",
            type: "warning"
          });
          this.$set(this, "startMonth", null);
          this.$set(this, "endTime", this.$utils.parseTime(this.endMonth, "{y}-{m}-{d}"));
          return;
        } else if (this.startMonth && this.startMonth <= this.endMonth) {
          this.endTime = this.$utils.parseTime(this.endMonth, "{y}-{m}-{d}");
          this.fetchData();
        }
      }
    },
    // 获取数据
    async fetchData() {
      try {
        const params = {
          startTime: this.startTime,
          endTime: this.endTime,
          timeType: this.defaultBtn
        };
        var res = await GetFinanceProfitDistributionChartApiForTwo(params);
        if (res.data.code === "0") {
          console.log(res.data.result);
          const result = res.data.result;
          this.$set(this, "businesProfitRatioPieArr", result.singleTargetListWithSum[0].list);// 营业毛利
          var singleTargetListWithSumData = {
            generalIncome: 0, // 总收入
            achievingRate: 0, // 达成率
            totalNetProfit: 0, // 净利润合计
            netProfitBudget: 0, // 净利润总预算
            totalGrossProfit: result.singleTargetListWithSum[0].total, // 毛利合计
            grossProfitBudget: result.singleTargetListWithSum[0].budgetValue, // 毛利总预算
            theCostOfACombined: 0, // 成本合计
            costBudgeting: 0 // 成本预算
          };
          result.multipleTargetListWithSum.forEach((resItem, resId) => {
            switch (resItem.code) {
              case 35004:// 营业成本
                singleTargetListWithSumData.theCostOfACombined = resItem.total;
                singleTargetListWithSumData.costBudgeting = resItem.budgetValue;
                this.$set(this, "nonbusinessIncomeArr", resItem.list);
                break;
              case 35007:// 营业收入
                singleTargetListWithSumData.generalIncome = resItem.total;
                singleTargetListWithSumData.achievingRate = resItem.budgetValue;
                this.$set(this, "generalIncomeArr", resItem.list);
                break;
              default:// 净利润
                singleTargetListWithSumData.totalNetProfit = resItem.total;
                singleTargetListWithSumData.netProfitBudget = resItem.budgetValue;
                this.$set(this, "grossProfitArr", resItem.list);
            }
          });
          result.multipleTargetList.forEach((resItem, resId) => {
            switch (resItem.code) {
              case 35005:// 期间费用
                this.$set(this, "businesProfitRatioBarArr", resItem.list);
                break;
              default:// 期间费用预算支出
                this.$set(this, "undistributedProfitShareArr", resItem.list);
            }
          });
          result.singleTargetList.forEach((resItem, resId) => {
            switch (resItem.code) {
              case 35002:// 人均劳效
                this.$set(this, "operatingExpensesAndProfitsArr", resItem.list);
                break;
              default:// 净利率
                this.$set(this, "otherProfitArr", resItem.list);
            }
          });
          this.$set(this, "singleTargetListWithSumData", singleTargetListWithSumData)
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 各板块主营业务收入净额(万元)
    // async fetchMainBusinessIncomeArr() {
    //   try {
    //     const res = await GetFinanceProfitDistributionForTrendChart();
    //     if (res.data.code === "0") {
    //       const resData = res.data.result
    //       const chartArr = [
    //         {
    //           type: "bar",
    //           name: "交易额",
    //           value: resData.reList,
    //           option: {}
    //         },
    //         {
    //           type: "line",
    //           name: "同比",
    //           value: resData.yearOnYearList,
    //           option: {}
    //         },
    //         {
    //           type: "line",
    //           name: "环比",
    //           value: resData.ringRatioList,
    //           option: {}
    //         }
    //       ];
    //       this.$set(this, "mainBusinessIncomeArr", chartArr);
    //     }
    //   } catch (error) {
    //     console.log(error);
    //   }
    // },
    fetchMainBusinessIncomeArr() {
      fetch("http://172.16.0.135:9001/api/Finance/GetFinanceProfitDistributionForTrendChart", {
        method: "POST"
      })
        .then(response => {
          response.json().then(res => {
            if (res.code === "0") {
              const resData = res.result.singleTargetList
              const chartArr1 = [];
              const chartArr2 = [];
              resData.forEach((resItem, resId) => {
                switch (resItem.code) {
                  case 33001:
                    chartArr1.push(
                      {
                        type: "bar",
                        name: resItem.codeName,
                        value: resItem.list,
                        option: {}
                      }
                    )
                    break;
                  case 33002:
                    chartArr1.push(
                      {
                        type: "line",
                        name: resItem.codeName,
                        value: resItem.list,
                        option: {}
                      }
                    )
                    break;
                  case 33003:
                    chartArr1.push(
                      {
                        type: "line",
                        name: resItem.codeName,
                        value: resItem.list,
                        option: {}
                      }
                    )
                    break;
                  case 33004:
                    chartArr2.push(
                      {
                        type: "bar",
                        name: resItem.codeName,
                        value: resItem.list,
                        option: {}
                      }
                    )
                    break;
                  case 33005:
                    chartArr2.push(
                      {
                        type: "line",
                        name: resItem.codeName,
                        value: resItem.list,
                        option: {}
                      }
                    )
                    break;
                  default:
                    chartArr2.push(
                      {
                        type: "line",
                        name: resItem.codeName,
                        value: resItem.list,
                        option: {}
                      }
                    )
                }
              });
              this.$set(this, "mainBusinessIncomeArr", chartArr1);
              this.$set(this, "netMarginArr", chartArr2);
            }
          })
        }
        ).then(
          response => response,
          error => error
        );
    }
  }
};
</script>
<style lang="scss">
@import "../../../../styles/element-ui/date/dateMonth.css"; // 月份选择
@import "../../../../styles/element-ui/radioBtn/radioBtnBlue.scss";
@import "../../../../styles/pages/finance/_finanProfit";
</style>
